<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script src="scripts/vue.js" type="text/javascript" charset="UTF-8"></script>
    <style type="text/css">
    #login{
        width: 500px;
        height:300px;
        background-color: greenyellow;
    }    
    #register{
        width: 500px;
        height:300px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <!--v-once : 一次性插入后不再修改（页面首次加载）-->
        <p v-once>{{msg}}</p>
        <!--插入html内容-->
        <p>{{HtmlTxt}}</p>
        <p v-Html="HtmlTxt"></p>
        <!--修改标签属性内容-->
        <div :id="idname">
            <p>登录</p>
        </div>
        <!--模板语言的表达式应用-->
        <p>{{firstname+lastname}}</p>
        <!--三元运算符-->
        <p>{{Gender==1?'男性':'女性'}}</p>
        <input type="button" value="改变背景颜色" @click="BtnText">
        
    </div>
    
    <script type="text/javascript">
    let app=new Vue({
        el:"#app",
        data:{
            msg:"hello world",
            HtmlTxt:"<span>hello</span>",
            idname:"login",
            firstname:"张",
            lastname:"三",
            Gender:1
        },
        methods:{
            BtnText(){
                document.body.style.background="skyblue";
                
                //$("#app").style.backgroud='skyblue';
            }
        }
    });
    </script>
</body>
</html>